<template>
  <div class="only_refund">
      <div class="header" v-for="(item,index) in list" :key="index">
          <image :src="item.img" alt=""/>
          <div class="header_r">
              <div class="title">{{item.title}}</div>
              <div class="cont">{{item.cont}}</div>
          </div>
      </div>
      <div style="width:100%;height:20rpx;background:#f5f5f5"></div>
      <!-- 仅退款 -->
      <div class="eason" v-if="state==0?true:false">
          <div class="eason_list" :style="eason_id==0?'border-top:none':''" v-for="(eason,eason_id) in eason_list" :key="eason_id"  @click="only_click(eason_id)">
              <div class="eason_l">{{eason.stod}}</div>
              <div class="eason_r">
                <div class="eason_title">请选择</div>
                <image src="/static/images/more.png" alt=""/>
              </div>
          </div>
      </div>
      <!-- 退货退款 -->
      <div class="eason_t" v-if="state==1?true:false">
          <div class="eason_list" style="border-top:none" @click="chooise">
              <div class="eason_l" >退款原因</div>
              <div class="eason_r">
                <div class="eason_title">请选择</div>
                <image src="/static/images/more.png" alt=""/>
              </div>
          </div>
      </div>
      <!-- 换货 -->
      <div class="eason_s" v-if="state==2?true:false">
          <div class="refund_list" v-for="(refund,refund_id) in eason_s" :key="refund_id" @click="return_click(refund_id)">
              <div class="refund_box">
                  <div class="eason_l" >{{refund.stod}}</div>
                  <div class="eason_r">
                    <div class="eason_title">请选择</div>
                    <image src="/static/images/more.png" alt=""/>
                  </div>
              </div>
              <div v-if="refund_id==1?false:true" style="width:100%;height:20rpx;background:#f5f5f5"></div> 
          </div>
      </div>
      <div style="width:100%;height:20rpx;background:#f5f5f5"></div> 
      <div class="refund_price">
        退款金额：<span>¥96.80</span>
      </div>
      <div style="width:100%;height:20rpx;background:#f5f5f5"></div>
      <div class="explain">
        退款说明：<input type="text" placeholder="请输入">
      </div>
      <div style="width:100%;height:20rpx;background:#f5f5f5"></div>
      <div class="up">上传凭证</div>
      <div class="upload">
          <div class="new_img" v-for="(new_item,new_id) in new_list" :key="new_id">
               <image class="up_img" :src="new_item" alt=""/>
                <img class="lose" src="/static/images/shangchu.png" alt="" @click="lose(new_id)">
          </div>
          <div class="img" v-for="(up_item,up_id) in up_list" :key="up_id" @click="upload_img">
              <image class="up_img" :src="up_item.img" alt=""/>
              <!-- <img class="lose" src="/static/images/shangchu.png" alt=""> -->
          </div>
      </div> 
     
      <!-- 弹出层 -->
      <div class="popup">
        <van-popup :show="show" z-index="999" position="bottom" close-on-click-overlay="false" @close="clickOverlay" custom-style="border-radius:30rpx 30rpx 0rpx 0rpx;">
        <div class="popup">
            <div class="popup_top">
                <img class="close" src="/static/images/cha.png" alt="" @click="clickOverlay">
                <div>{{popupTitle}}</div>
            </div>
            <div class="popup_bottom">    
              <van-radio-group :value="radio" @change="onChange">
                    <van-cell-group>
                      <van-cell v-if="title_a?true:false"  :title="title_a" value-class="value_class" clickable data-name="1" @click="onClick"><van-radio name="1" /></van-cell>
                      <van-cell v-if="title_b?true:false" :title="title_b" value-class="value_class" clickable data-name="2" @click="onClick"><van-radio name="2" /></van-cell>
                      <van-cell v-if="title_c?true:false"  :title="title_c" value-class="value_class" clickable data-name="3" @click="onClick"><van-radio name="3" /></van-cell>
                      <van-cell v-if="title_d?true:false"   :title="title_d" value-class="value_class" clickable data-name="4" @click="onClick"><van-radio name="4" /></van-cell>
                      <van-cell v-if="title_e?true:false"  :title="title_e" value-class="value_class" clickable data-name="5" @click="onClick"><van-radio name="5" /></van-cell>
                      <!-- <van-cell  title="单选框 1" value-class="value-class" clickable data-name="6" @click="onClick"><van-radio name="1" /></van-cell> -->
                    </van-cell-group>
                  </van-radio-group>
            </div>
            <div class="complt" @click="clickOverlay">完成</div>
        </div>
      </van-popup>
      </div>
      
      <!-- 换货商品弹出层 -->
      <van-popup :show="shop_show" z-index="999" position="bottom" close-on-click-overlay="false" @close="shopOverlay" custom-style="border-radius:30rpx 30rpx 0rpx 0rpx;">
        <div class="shop_list" v-for="(item,shop_id) in shop_list" :key="shop_id">
          <div class="shop_header">
            <image class="shop_header_l" :src="item.img" alt=""/>
            <div class="shop_header_r">
              <div class="header_r_t">{{item.title}}</div>
              <div class="header_r_c">库存： {{item.ku_num}}件</div>
              <div class="header_r_b">¥{{item.price}}</div>
            </div> 
          </div> 
          <div class="color">颜色</div> 
          <div class="color_list">
              <div class="color_center" :style="rex==color_id?'background:#FF3D4FFF;color:#fff':''" v-for="(color,color_id) in item.color_list" :key="color_id" @click="color_center(color_id)">{{color.title}}</div>
          </div>
          <div class="size">尺码</div> 
          <div class="size_list">
              <div class="size_center" :style="nex==size_id?'background:#FF3D4FFF;color:#fff':''" v-for="(size,size_id) in item.size_list" :key="size_id" @click="size_center(size_id)">{{size.title}}</div>
          </div>
          <div class="mum_box">
              <div class="num_l">数量 <span>(最多选择{{item.num}}件)</span></div>
              <van-stepper custom-class="custom"
                :value="num_value"
                integer
                min="1"
                :max="item.num"
                step="1"
                @change="numChange"
              />
          </div>
          <div class="shop_footer" @click="shop_footer">完成</div>
        </div>
      </van-popup>
       <div class="footer" @click="submit">提交</div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      list:[{img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休',cont:'规格规格'}],  //商品信息
      eason_list:[{stod:'货物状态'},{stod:'退款原因'}],  //仅退款数组
      up_list:[{img:'/static/images/scpz.png'}],  //上传图片
      eason_s:[{stod:'换货原因'},{stod:'换货商品'}],    //换货数组
      shop_list:[{img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休',ku_num:'135',price:'99.99',color_list:[
        {title:'蓝色'},{title:'红黑'},{title:'紫色'},{title:'蓝白'},{title:'绿色'},{title:'藏青色'}
        ],size_list:[{title:'80cm'},{title:'90cm'},{title:'100cm'},{title:'110cm'},{title:'120cm'},{title:'130cm'}],num:'2'
      }],  //退换货(换货商品)
      new_list:[],
      rex:-1,
      nex:-1,
      listId:'',
      num_value:1, //步数器
      popupTitle:'',
      title_a:'',
      title_b:'',
      title_c:'',
      title_d:'',
      title_e:'',
      radio:'',
      checked:'',
      changeId:'',
      state:'', //状态
      show: false,  //弹出层
      shop_show:false  //换货商品弹出层
    }
  },
  onLoad(){
    this.state=this.globalData.refundId
  },
  methods:{
    // 仅退款
    only_click(id){
      this.show=true
      if(id==0){
        this.popupTitle='货物状态'
        this.title_a = '未收到货'
        this.title_b = '已收到货'
      }
      if(id==1){
        this.popupTitle='退款原因'
        this.title_a = '多拍/错拍/不想要'
        this.title_b = '缺货'
        this.title_c = '不喜欢/不想要'
        this.title_d = '未按约定时间发货'
      }
    },
    //退货退款
    chooise(){
      this.show=true
      this.popupTitle='退款原因'
      this.title_a = '多拍/错拍/不想要'
      this.title_b = '缺货'
      this.title_c = '不喜欢/不想要'
      this.title_d = '未按约定时间发货'
      this.title_e = '商品与描述不符'
    },
    //退换货
    return_click(id){
       if(id==0){
         this.show=true
         this.popupTitle='换货原因'
        this.title_a = '多拍/错拍/不想要'
        this.title_b = '缺货'
        this.title_c = '不喜欢/不想要'
        this.title_d = '未按约定时间发货'
        this.title_e = '商品与描述不符'
      }
      if(id==1){
        this.shop_show=true
      }    
    },
    // 上传图片
    upload_img(){
      var that  = this
      // console.log(that.new_list)
         wx.chooseImage({
          count: 3,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success (res) {
            // console.log(res.tempFilePaths,'图片')
            if(that.new_list==[]){
              that.new_list = res.tempFilePaths
              if(that.new_list.length==3){
                that.up_list=[]
              }
            }else{
                res.tempFilePaths.map((item,index)=>{
                if( that.new_list.length<3){
                  that.new_list.push(item)
                } 
                if(that.new_list.length==3){
                    that.up_list=[]
                  }
              })
            }
            // tempFilePath可以作为img标签的src属性显示图片
            // const tempFilePaths = res.tempFilePaths
          }
        })   
    },
    // 删除图片
    lose(id){
      this.new_list.splice(id,1)
      if(this.new_list.length<3){
        this.up_list= [{img:'/static/images/scpz.png'}]
      } 
      
    },
    // 关闭弹出层
    clickOverlay(){
      this.show=false
    },
    // 关闭商品弹出层
    shopOverlay(){
      this.shop_show=false
    },
    onChange(event) {
    this.radio = event.detail
  },

  onClick(event) {
    const { name } = event.currentTarget.dataset;
    this.radio =name
  },
    //步数器
    numChange(e){
      console.log(e.target,'num')
    },
    //颜色选择
    color_center(id){
      this.rex=id
    },
    //尺寸选择
    size_center(id){
      this.nex=id
    },
    //提交
    submit(){
      var id = this.state
      wx.navigateTo({
        url: '/pages/refund_details/main?id='+id
      })
    },
    shop_footer(){
      this.shop_show=false
    } 
  },
  // 页面下载时触发
  onUnload: function () {
    this.show=false
    this.shop_show=false
    // wx.reLaunch({
    //   url: '/pages/refund/main'
    // })
  },

  created () {
    
  }
}
</script>

<style lang="less">
.value_class {
  flex: none !important;
}
.custom{
  height: 40rpx!important;
}
  .only_refund{
    width: 100%;
    height: 100%;
    position: fixed;
    .header{
        width: 100%;
        height: 200rpx;
        display: flex;
        padding: 20rpx 30rpx 0 30rpx;
        box-sizing: border-box;
        border-top: 2rpx solid #ccc;
        image{
          width: 150rpx;
          height: 150rpx;
          margin-right: 20rpx;
        }
        .header_r{
          width: 520rpx;
          display: flex;
          flex-direction: column;
          color: #333;
          font-size: 26rpx;
          .title{
            overflow:hidden;
            text-overflow: ellipsis;//显示省略号
            display:-webkit-box;
            -webkit-line-clamp:2;//块元素显示的文本行数
            -webkit-box-orient:vertical;
          }
          .cont{
            margin-top: 8rpx;
            color: #999;
            font-size: 24rpx;
          }
        }
      }
      .eason{
        width: 100%;  
        .eason_list{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 64rpx;
          padding: 0 30rpx;
          box-sizing: border-box;
          border-top: 2rpx solid #ccc;
          .eason_l{
            color: #333;
            font-size: 26rpx;
          }
          .eason_r{
            display: flex;
            align-items: center;
            color: #999;
            font-size: 24rpx;
            image{
              width: 14rpx;
              height: 26rpx;
              margin-left: 34rpx;
              margin-top: 2rpx;
            }
          }
        }
      }
      .eason_t{
        width: 100%;  
        .eason_list{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 64rpx;
          padding: 0 30rpx;
          box-sizing: border-box;
          border-top: 2rpx solid #ccc;
          .eason_l{
            color: #333;
            font-size: 26rpx;
          }
          .eason_r{
            display: flex;
            align-items: center;
            color: #999;
            font-size: 24rpx;
            image{
              width: 14rpx;
              height: 26rpx;
              margin-left: 34rpx;
              margin-top: 2rpx;
            }
          }
        }
      }
      .eason_s{
        width: 100%;
        .refund_list{
          
          .refund_box{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64rpx;
            padding: 0 30rpx;
            box-sizing: border-box;
             .eason_l{
              color: #333;
              font-size: 26rpx;
            }
            .eason_r{
              display: flex;
              align-items: center;
              color: #999;
              font-size: 24rpx;
              image{
                width: 14rpx;
                height: 26rpx;
                margin-left: 34rpx;
                margin-top: 2rpx;
              }
            }
          }
        }
      }
      .refund_price{
        width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #333;
        padding-left: 30rpx;
        box-sizing: border-box;
      }
      .explain{
         width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #333;
        padding-left: 30rpx;
        box-sizing: border-box;
        input{

        }
      }
      .up{
        padding: 24rpx 30rpx;
        box-sizing: border-box;
        color: #333;
        font-size: 26rpx;
      }
      .upload{
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
        .new_img{
          position: relative;
          .up_img{
            width: 200rpx;
            height: 200rpx;
            margin-right: 20rpx;
          }
          .lose{
            position: absolute;
            width: 40rpx;
            height: 40rpx;
            left: 180rpx;
            top: -20rpx;
          }
        }
        .img{
          position: relative;
          .up_img{
            width: 200rpx;
            height: 200rpx;
            margin-right: 20rpx;
          }
        }
       
      }
      .footer{
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        color: #fff;
        font-size: 28rpx;
        background: #FF3D4FFF;
        position: fixed;
        bottom: 0;
      }
      .popup{
        width: 100%;
        height: 760rpx;
        border-radius:30rpx 30rpx 0rpx 0rpx;
        background: #fff;
        position: relative;
        .popup_top{
          width: 100%;
          height: 108rpx;
          display: flex;
          align-items: center;
          padding-left: 32rpx;
          box-sizing: border-box;
          color: #333;
          font-size: 40rpx;
          font-weight:bold;
          image{
            width: 34rpx;
            height: 34rpx;
            margin-right: 230rpx;
          }
        }
        .popup_bottom{
          width: 100%;
          padding-left: 32rpx;
          box-sizing: border-box;
          color: #333;
          font-size: 26rpx;
        }
        .complt{
          width:616rpx;
          height:80rpx;
          line-height: 80rpx;
          text-align: center;
          color: #fff;
          background:rgba(255,61,79,1);
          border-radius:40rpx;
          font-size: 30rpx;
          position: absolute;
          bottom: 20rpx;
          left: 68rpx;
        }
      }
      .shop_list{
         width: 100%;
        // height: 760rpx;
        border-radius:30rpx 30rpx 0rpx 0rpx;
        background: #fff;
        padding: 30rpx 30rpx 20rpx 30rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        color: #000;
        .shop_header{
          width: 100%;
          height: 170rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .shop_header_l{
            width: 170rpx;
            height: 170rpx;
          }
          .shop_header_r{
            width: 504rpx;
            height: 170rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .header_r_t{
              overflow:hidden;
              text-overflow: ellipsis;//显示省略号
              display:-webkit-box;
              -webkit-line-clamp:2;//块元素显示的文本行数
              -webkit-box-orient:vertical;
            }
            .header_r_c{
              color: #999;
            }
            .header_r_b{
              font-size: 28rpx;
            }
          }
        }
        .color{
          font-size:26rpx;
          margin: 8rpx 0 14rpx 0;
        } 
        .color_list{
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 12rpx;       
          width: 100%;
          .color_center{
            width:120rpx;
            height:50rpx;
            background:rgba(240,240,240,1);
            border-radius:40rpx;
            line-height: 50rpx;
            text-align: center;
            margin-bottom: 20rpx;
            margin-right: 50rpx;
          }
        }
        .size{
          font-size:26rpx;
          margin: 0rpx 0 16rpx 0;
        } 
        .size_list{
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 34rpx; 
          width: 100%;
          .size_center{
            width:120rpx;
            height:50rpx;
            background:rgba(240,240,240,1);
            border-radius:40rpx;
            line-height: 50rpx;
            text-align: center;
            margin-bottom: 20rpx;
            margin-right: 50rpx;
          }
        }
        .mum_box{
          width: 100%;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .num_l{
            color: #666;
            span{
              color: #000;
              font-size: 24rpx;
            }
          }
        }
        .shop_footer{
          width:616rpx;
          height:80rpx;
          line-height: 80rpx;
          text-align: center;
          color: #fff;
          background:rgba(255,61,79,1);
          border-radius:40rpx;
          font-size: 30rpx;
          margin: 62rpx 0 0 36rpx;
          
        }
      }
  }
</style>
